import {Dropdown, Layout, Menu} from 'antd';
import {
     MenuUnfoldOutlined,RadarChartOutlined,PieChartOutlined,SettingOutlined,
    MenuFoldOutlined, UserOutlined,
} from '@ant-design/icons';

import {connect, history} from 'umi';

const { Header, Content, Sider } = Layout;
import './layout.less'
import Avatar from "antd/es/avatar/avatar";


 class AdminHeader extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: false,
        }
    }

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    // handler
    handleClick = e => {
        if (history.location.pathname !== e.key) history.push(e.key);
    };



    render() {
        return (
            <Layout hasSider style={{height:"100vh"}}>
                <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
                    <div className="logo" />
                    <Menu theme="dark" onClick={this.handleClick} defaultSelectedKeys={['/admin/adminHome']} selectedKeys={history.location.pathname} mode="inline">
                        <Menu.Item key="/admin/adminHome"  icon={<UserOutlined />}>
                            管理员首页
                        </Menu.Item>
                        <Menu.Item key="/admin/product" icon={<PieChartOutlined />}>
                            商品管理统计
                        </Menu.Item>
                        <Menu.Item key="/admin/productType" icon={<RadarChartOutlined />}>
                            商品类型管理
                        </Menu.Item>
                        <Menu.Item key="/admin/transaction" icon={<SettingOutlined />}>
                            订单管理统计
                        </Menu.Item>
                    </Menu>
                </Sider>
                <Layout className="site-layout">
                    <Header className="site-layout-background">
                        {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger',
                            onClick: this.toggle,
                        })}
                        <div className='Avatar'>
                            <span style={{ marginRight:'15px'}}>
                                {this.props.username}
                            </span>
                            <Dropdown overlay={
                                <Menu onClick={this.handleClick}>
                                    <Menu.Item key={'/login'}>
                                        登 出
                                    </Menu.Item>
                                </Menu>
                            }>
                                <Avatar icon={<UserOutlined />} />
                            </Dropdown>

                        </div>
                    </Header>
                    <Content className="content">
                        {this.props.children}
                    </Content>
                </Layout>
            </Layout>
        );
    }
}
function mapStateToProps({ loginModel }) {
    const { username } = loginModel;
    return { username };
}
export default connect(mapStateToProps)(AdminHeader);
